<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="fn">点我</button>
    <input v-focus type="text" v-model="str">
</div>
</body>
<script>
	new Vue({
		el:"#root",
        data:{
			str:"今天很开心！"
        },
        methods:{
			fn(){
				this.str += "!"
				document.querySelector("input").focus();
            }
        },
        directives:{
		    // focus(el){
			// 	console.log("focus",document.querySelector("input").value)
			// 	el.focus();
            // },
            focus:{
				inserted(el){
					// console.log("inserted",document.querySelector("input").value)
                    el.focus();
                }
            }
        },
        beforeMount(){
			console.log(document.querySelector("input").value)
        },
        mounted(){
			// document.querySelector("input").focus();
			console.log(document.querySelector("input").value)
        }
	})
</script>
</html>